@extends('admin.master')

@section('css')
    <link rel="stylesheet" type="text/css" href="/css/ga-embed.css">
@stop
@section('page_header')
    <h1 class="page-title">
        <i class="voyager-lock"></i>查看角色信息 
        @if ($edit_role)
        <a href="{{ route('role.add', $role->id) }}" class="btn btn-success">
            <i class="voyager-edit"></i>编辑角色
        </a>
        @endif
    </h1>
@stop
<style>
.permissions li {
list-style:none;
}
</style>
@section('content')
    <div class="page-content container-fluid">
        <div class="row">
            <div class="col-md-12">

                <div class="panel panel-bordered">

                    <div class="form-group">
                        <label for="name">角色名</label>
                        <input type="text" class="form-control" name="name"
                            placeholder="角色名" disabled
                            value="{{ $role->name }}">
                    </div>
                    <div class="form-group">
                        <label for="name">描述</label>
                        <input type="text" class="form-control" name="display_name"
                            placeholder="描述" disabled
                            value="{{ $role->display_name }}">
                    </div>
                    <label for="permission">权限</label><br>
                    <ul class="permissions checkbox">
                    @foreach ($permissions as $table=>$permission)
                        <li>
                            <label for="{{$table}}"><strong>{{ucwords($table)}}</strong></label>
                            <ul>
                            @foreach($permission as $perm)
                                <li>
                                    <label for="permission-{{$perm->id}}">{{title_case(str_replace('_', ' ', $perm->key))}}</label>
                                </li>
                            @endforeach
                            </ul>
                        </li>
                    @endforeach
                    </ul>
                </div>
            </div>
        </div>
    </div>
    @stop
    @section('javascript')
<script>
$('document').ready(function () {
    $('.toggleswitch').bootstrapToggle();
    $('.permission-group').on('change', function(){
        $(this).siblings('ul').find("input[type='checkbox']").prop('checked', this.checked);
    });
    $('.permission-select-all').on('click', function(){
        $('ul.permissions').find("input[type='checkbox']").prop('checked', true);
        return false;
    });
    $('.permission-deselect-all').on('click', function(){
        $('ul.permissions').find("input[type='checkbox']").prop('checked', false);
        return false;
    });
    function parentChecked(){
        $('.permission-group').each(function(){
            var allChecked = true;
            $(this).siblings('ul').find("input[type='checkbox']").each(function(){
                if(!this.checked) allChecked = false;
            });
            $(this).prop('checked', allChecked);
        });
    }
    parentChecked();
    $('.the-permission').on('change', function(){
        parentChecked();
    });
});
</script>
    <script src="/js/tinymce/tinymce.min.js"></script>
    <script src="/js/voyager_tinymce.js"></script>
@stop

